<template>
    <el-select
        class="custom-select-tree"
        :class="{ 'custom-select-tree-clear': isShow }"
        ref="customSelect"
        v-model="selectValue"
        :placeholder="placeholder"
        :popper-class="popperClass"
        :size="size"
    >
        <el-option :value="optionVal" :label="optionLab">
            <el-tree
                ref="customSelectTree"
                highlight-current
                :data="data"
                :node-key="defaultProps.value"
                :expand-on-click-node="false"
                :default-expanded-keys="defaultExpandedKeys"
                :props="defaultProps"
                @node-click="handleNodeClick"
            ></el-tree>
        </el-option>
        <template slot="prefix">
            <span class="el-input__suffix-inner" v-show="isShow">
                <i @click.stop="clear" class="el-select__caret el-input__icon el-icon-circle-close"></i>
            </span>
        </template>
    </el-select>
</template>
<script>
export default {
    // 设置接收的prop名称 及 event 事件名
    model: {
        prop: 'selectValue',
        event: 'change'
    },
    props: {
        selectValue: {
            type: [String, Number],
            default: ''
        },
        currentNode: {
            type: Object,
            default: () => ({
                value: '',
                label: ''
            })
        },
        defaultProps: {
            type: Object,
            default: () => ({
                value: 'id',
                label: 'name',
                children: 'children'
            })
        },
        popperClass: {
            type: String,
            default: 'custom-select-tree'
        },
        data: {
            type: Array,
            default: () => []
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        size: {
            type: String,
            default: 'mini'
        },
        clearable: {
            type: Boolean,
            default: false
        },
        defaultExpandedKeys: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            optionVal: this.currentNode.value,
            optionLab: this.currentNode.label,
            currentNodeKey: this.currentNode.value,
            isCloseShow: false
        }
    },
    created() {
        console.log('model' + this.selectValue, this.currentNode)
    },
    methods: {
        handleNodeClick(data, node, current) {
            let currentNode = this.$refs.customSelectTree.getCurrentNode()
            this.optionVal = currentNode.id
            this.optionLab = currentNode.name
            this.$refs.customSelect.blur()
            // 设置双向绑定
            this.$emit('change', currentNode.id)
        },
        clear() {
            this.optionVal = ''
            this.optionLab = ''
            // 设置双向绑定
            this.$emit('change', '')
            // 清空
            this.$refs.customSelectTree.setCurrentKey(null)
        }
    },
    computed: {
        /**
         *  手动实现clearble 方法,并且绑定视图的清除按钮
         *  1. clearable === true 并且 当前值不能为空
         *      > 使得插槽生效
         *      > 才能添加clear选择器 从而执行该选择器下的样式
         */
        isShow: function() {
            return this.clearable && this.selectValue.trim() !== ''
        },
        // 合并监听
        dataAndNode: function() {
            return {
                data: this.data,
                node: this.currentNode
            }
        }
    },
    watch: {
        dataAndNode: {
            handler(val) {
                const { data, node } = val
                this.optionVal = node.value
                this.optionLab = node.label
                this.currentNodeKey = node.value
                // 数据进入树控件DOM渲染完成后
                this.$nextTick(() => {
                    this.$refs.customSelectTree.setCurrentKey(this.currentNodeKey)
                })
                console.log(this.selectValue)
            },
            deep: true
        }
    }
}
</script>
<style lang="scss">
.custom-select-tree {
    .el-input--prefix .el-input__inner {
        padding-left: 15px;
    }

    .el-select-dropdown__list .el-select-dropdown__item {
        height: 156px;
        overflow: auto;
        line-height: 0;
    }

    .el-select-dropdown__item.selected {
        font-weight: 500;
    }

    .el-tree {
        color: #606266 !important;
    }

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #ffffff;
    }

    .el-select-dropdown__item {
        padding: 0;
        height: 100%;
        font-weight: 500;
    }

    .el-tree-node.is-current,
    .el-tree-node.is-checked {
        > .el-tree-node__content {
            .el-tree-node__label {
                @include themify() {
                    color: themed('primaryColor');
                }
                font-weight: bold;
            }
        }
    }
}
</style>

<style lang="scss">
.el-select.custom-select-tree.custom-select-tree-clear {
    .el-input__prefix {
        // width: 25px;
        right: 5px;
        left: inherit;
    }

    .el-icon-circle-close {
        display: none;
    }

    &:hover {
        .el-icon-arrow-up {
            display: none;
        }

        .el-icon-circle-close {
            display: inline-block;
        }
    }
}
</style>
